<template>
	<view class="content">
		<view class="tabbar">
			<!-- 左侧logo -->
			<view class="left flex justify-center align-center flex-1">
				<view class="logo">订单</view>
				<text class="flex-1">订单管理平台</text>
			</view>
			<!-- 中部按钮 -->
			<view class="center flex justify-around flex-2">
				<view style="cursor: pointer;padding: 0 0px;" class="center-wrap" v-for="(item,index) in tab"
					@click="choce(item,index)" :class="index == tabindex ? 'color':''">
					<view class="navItem" :class="index == tabindex ? 'bottom-line':''">{{item.title}}</view>
				</view>
			</view>
			<!-- 右侧昵称 -->
			<view @click="logoutShow = true" class="right flex justify-center align-center flex-1">
				<text>{{userData.nickName}}</text>
			</view>
		</view>
		<view v-if="title == '测工时'">
			<virtualOrderPage />
		</view>
		<view v-if="title == '细分工序'">
			<checkpro />
		</view>
		<view v-if="title == '大工序'">
			<order-page />
		</view>
		<view v-if="title == '统计'">
			<first-page />
		</view>
		<view v-if="title == '我的工资'">
			<my-price />
		</view>
		<view v-if="title == '工资汇总'">
			<count-price />
		</view>
		<u-modal :show="logoutShow" title="提示" :content="'确认退出登录吗?'" showConfirmButton showCancelButton confirmText="确认"
			cancelText="取消" @confirm="handleLogout" @cancel="logoutShow=false"></u-modal>
	</view>
</template>

<script>
	import constant from '@/constant/constant.js'

	import firstPage from './firstPage.vue' //首页
	import orderPage from './orderPage.vue' //订单页
	import myPrice from './myPrice.vue' //我的工资
	import countPrice from './countPrice.vue' //工资汇总
	import virtualOrderPage from './virtualOrderPage.vue'
	import checkpro from './checkpro.vue'
	export default {
		components: {
			firstPage,
			orderPage,
			myPrice,
			countPrice,
			virtualOrderPage,
			checkpro
		},
		data() {
			return {				
				logoutShow: false, //退出登录弹框
				userData: {}, //获取到的用户数据
				tab: [{
						title: "细分工序"
					},
					{
						title: "大工序"
					},
					{
						title: "统计"
					},
					{
						title: "我的工资"
					},
					{
						title: "工资汇总"
					},
				],
				tabindex: 0,
				title: "",
				// show: false   //点击头像的弹出框
			}
		},
		onLoad() {
			this.userData = uni.getStorageSync('userData')
			if (this.userData.isUnrealPermission == 2) {
				this.tab.unshift({
					title: "测工时"
				})
				this.title = "测工时"
			}else{
				this.title = this.tab[0].title;
			}
			if (!this.userData) {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			}
		},
		methods: {
			// 切换tab页
			choce(item, index) {
				if (this.tabindex == index) {
					return;
				} //防止重复发送请求
				this.tabindex = index
				this.title = item.title
			},
			// 退出登录
			handleLogout() {
				//清除用户信息
				uni.removeStorageSync('userData')
				// 清除token
				uni.removeStorageSync(constant.StorageName.APP_LOGIN_TOKEN)
				// 跳转回登录页
				uni.redirectTo({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.tabbar {
			background-color: #306EEC;
			height: 80rpx;
			display: flex;
			justify-content: space-around;
			// padding: 10rpx 0;

			.center {
				display: flex;
				color: #fff;
				// align-items: center;
				line-height: 80rpx;

				.color {
					color: #155CB8;
					background-color: #FFFFFF;
				}

				view {
					text-align: center;
					position: relative;
					padding: 0 20rpx;
				}
			}
		}

	}

	.logo {
		width: 60rpx;
		height: 60rpx;
		background: rgb(255, 255, 255);
		border-radius: 50%;
		opacity: 1;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 48rpx;
		color: #155CB8;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10rpx 20rpx 10rpx 0;
	}

	.avatar {
		width: 36rpx;
		height: 36rpx;
		background: rgb(255, 255, 255);
		border-radius: 50%;
		margin: 10rpx 10rpx 10rpx 0;
	}

	.left {
		margin-left: 50rpx;
	}

	.left text {
		width: 144rpx;
		height: 33rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 33rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.right text {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		line-height: 24rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.uni-view {
		display: inline-block;
	}

	.navItem {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		font-size: 27rpx;
		font-weight: bold;
	}

	.bottom-line {
		border-bottom: 7rpx solid #155CB8;
	}

	// .header-dialog{
	// 	width: 150rpx;
	// 	height: 50rpx;
	// 	background-color: #fff;
	// 	border: 1rpx solid #ccc;
	// 	position: relative;
	// 	top:50rpx;
	// }
</style>